const formateTime = (dates?: Date | string): string => {
  //  如果不传递参数 就用当前时间
  if (!dates) dates = new Date()

  //  如果传递进来的是一个字符串那么就转换成时间时间格式
  if (typeof dates === 'string') {
    dates = new Date(dates)
  }

  let h: number | string = dates.getHours()
  let m: number | string = dates.getMinutes()
  let s: number | string = dates.getSeconds()

  h = h >= 10 ? h : '0' + h
  m = m >= 10 ? m : '0' + m

  s = s >= 10 ? s : '0' + s

  return `${h}:${m}:${s}`
}

type Data = {
  count: number

  time: string
}

var List: Data[] = getData()

const KEY = 'ts-demo-data'
let lastCount = 0
function updateData() {
  // 1 获取之前的 缓存数据
  //  2 追加一条数据
  // 3 存储最新的数据

  let res = getData()

  if (res.length) {
    lastCount = res[res.length - 1].count + 1
  } else {
    lastCount = 1
  }

  List.push({
    count: lastCount,
    time: formateTime(),
  })

  console.log(List)

  localStorage.setItem(KEY, JSON.stringify(List))
}

function getData() {
  // 获取缓存的数据  并且转变为数据格式的json 数据
  let getLocal: string | null = localStorage.getItem(KEY)
  let res = JSON.parse(getLocal || '[]') as Data[]
  return res
}

// 1 每一次render 被调用的时候 更新数据
// 2  每一次render 被调用的时候 获取更新后的数据 进行页面渲染
function render() {
  updateData()

  let data = getData()

  const divDoms = document.getElementById('divBox') as HTMLDivElement

  divDoms.innerHTML = data
    .map((item) => {
      return `  次数 ：${item.count}   ----   时间:   ${item.time}`
    })
    .join('<br/>')
}

render()
